<template>
  <div class="list-view">
    <!-- 顶部导航 -->
    <detail-header />

    <!-- 列表页面包屑 -->
    <div class="bread_nav">
      <ul class="bread_nav_zi">
        <li><a href="#" target="_self">西安链家网</a></li>
        <span>></span>
        <li><a href="#" target="_self">西安租房</a></li>
      </ul>
    </div>

    <!-- 筛选页 -->
    <div class="filter">
      <ul class="f1">
        <li><a href="#" target="_self">按区域</a></li>
        <li><a href="#" target="_self" >按地铁线</a></li>
      </ul>
      <ul class="f2">
        <li
         @click="now = i"
          v-for="(cityss,i) in citys "  :key="i"
        ><a href="#"  target="_self" :class="{ active: now == i }">{{cityss}}</a></li>
      </ul>
      <ul class="f3">
        <li><a href="#" style="font-size: 14px; font-weight: 700">方式</a></li>
        <li><a href="#" target="_self">不限</a></li>
        <li><a href="#" target="_self">整租</a></li>
        <li><a href="#" target="_self">合租</a></li>
      </ul>
      <ul class="f4">
        <li><a href="#" style="font-size: 14px; font-weight: 700">租金</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">≤1000元</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">1000-1500元</a></li>
        <li><input type="checkbox" /><a href="#" target=" _self">1500-2000元</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">2000-2500元</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">2500-3000元</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">3000-5000元</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">≥5000元</a></li>
        <li class="inputs"><input type="text" />-<input type="text" /></li>
        <li><a href="#" style="color: #00ae66" target="_self">确定</a></li>
      </ul>
      <ul class="f5">
        <li><a href="#" style="font-size: 14px; font-weight: 700" target="_self">户型</a></li>
        <li><input type="checkbox" /><a href="#">一居</a></li>
        <li><input type="checkbox" /><a href="#">二居</a></li>
        <li><input type="checkbox" /><a href="#">三居</a></li>
        <li><input type="checkbox" /><a href="#">四居+</a></li>
      </ul>
      <ul class="f6">
        <li><a href="#" target="_self" style="font-size: 14px; font-weight: 700">朝向</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">东</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">西</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">南</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">北</a></li>
        <li><input type="checkbox" /><a href="#" target="_self">南北</a></li>
      </ul>
      <div class="yingcang"  v-show="listShow">
        <ul class="f7">
          <li>
            <a href="#" style="font-size: 14px; font-weight: 700" target="_self">品牌</a>
          </li>
          <li><input type="checkbox" /><a href="#" target="_self">链家</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">自如</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">圣安百领公寓</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">拾光盒公寓</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">8090</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">西安怡家公寓</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">壹人壹家白领公寓</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">Myouth+万象青年公寓</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">帮帮租房</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">忆拾光公寓</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">爱租客公寓</a></li>
        </ul>
        <ul class="f8">
          <li>
            <a href="#" target="_self" style="font-size: 14px; font-weight: 700">特色</a>
          </li>
          <li><input type="checkbox" /><a href="#" target="_self">近地铁</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">拎包入住</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">精装修</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">集中供暖</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">押一付一</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">新上</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">认证公寓</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">随时看房</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">VR房源</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">业主自荐</a></li>
        </ul>
        <ul class="f9">
          <li>
            <a href="#" target="_self" style="font-size: 14px; font-weight: 700">租期</a>
          </li>
          <li><input type="checkbox" /><a href="#" target="_self">月租</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">年租</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">一个月起租</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">1-3个月</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">4-6个月</a></li>
        </ul>
        <ul class="f10">
          <li>
            <a href="#" target="_self" style="font-size: 14px; font-weight: 700">楼层</a>
          </li>
          <li><input type="checkbox" /><a href="#" target="_self">低楼层</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">中楼层</a></li>
          <li><input type="checkbox" /><a href="#" target="_self">高楼层</a></li>
        </ul>
        <ul class="f11">
          <li>
            <a href="#" style="font-size: 14px; font-weight: 700">电梯</a>
          </li>
          <li><input type="checkbox" /><a href="#">无电梯</a></li>
          <li><input type="checkbox" /><a href="#">有电梯</a></li>
        </ul>
      </div>
      <div @click="listOperate()" class="shouqi">{{listShow? '收起':'展开'}}</div>
    </div>

    <!-- 房源列表 -->
    <div class="centent">
      <div class="centent_left">
        <p class="centent_title">
          已经为您找到
          <span>81827</span>套
          <a href="#" style="color: #101d37">西安租房</a>
          <span class="title_qingkong">
            <a href="#" style="color: #9399a5">清空条件</a>
          </span>
        </p>
        <ul class="centent_filter">
          <li><a href="#">综合排序</a></li>
          <li><a href="#">最新上架</a></li>
          <li><a href="#">价格</a></li>
          <li><a href="#">面积</a></li>
        </ul>
        <div class="centent_list" v-if="data">
          <div class="centent_list-f1" v-for="{address,area,day,direction,home,lid,picture,price,title} in data.results" :key="lid">
            <img
              :src="picture"
              alt=""
            />
            <div class="centent_list-main">
              <router-link>
                
              </router-link>
              <p class="centent_list-title">
                <a href="#">{{title}}</a>
              </p>
              <p class="centent_list-des">
                <a href="#">{{address}}</a>
                <i>/</i>
                {{area}}㎡
                <i>/</i>{{direction}}<i>/</i>
                {{home}}
              </p>
              <p class="centent_list-bottom">
                <i>集中供暖</i>
              </p>
              <p class="centent_list-brand">
                <span class="centent_list-brand-sp">
                  <img src="../../public/img/time@2x.png" alt="" />
                  {{day}}
                </span>
              </p>
              <span class="centent_list-price">
                <em>{{price}}</em>
                元/月
              </span>
            </div>
          </div>
		  
          <div class="centent_pg" >
            <span
            :class="{ avt: pages== p }"
             @click="pages=p"   v-for="p in data.pagecount" :key="p"  style="cursor:pointer;" >{{p}}</span>
          </div>
        </div>
      </div>
      <div class="centent_right">
        <div class="reweima">
          <img src="../../public/img/getDownloadQr.png" alt="" />
          <p class="p1">下载链家APP</p>
          <p>扫描上方二维码</p>
          <p>随时查看新房源</p>
          <p>了解更多</p>
        </div>
        <div class="zixun">
          <img src="../../public/img/saoma.jpeg" alt="" />
          <p>扫描微信咨询</p>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <div class="wrapper">
        <div class="f-title">
          <ul>
            <li><a href="https://xa.lianjia.com/sitemap/">网站地图</a></li>
          </ul>
          <div class="fr">官方客服 1010 9666</div>
        </div>
        <div class="lianjia-link-box">
          <div id="fl">
            <div class="tab">
              <span
                :class="{ on: nows == i }"
                @mouseover="nows = i"
                v-for="(item, i) in items"
                :key="i"
                >{{ item }}</span
              >
            </div>
            <!-- 详情列表 -->
            <div class="link-list">
              <!-- 二手房 -->
              <div v-show="nows == 0">
                <dd>
                  <a href="//bj.ke.com"
                    >北京房产网</a
                  >
                  <a href="//news.lianjia.com/bj/"
                    >北京房产资讯</a
                  >
                </dd>
              </div>
              <!-- 热门小区 -->
              <div v-show="nows == 1">
                <dd>
                  <a href="//news.lianjia.com/bj/">北京房产资讯</a>
                  <a href="//news.lianjia.com/bj/">北京房产资讯</a>
                </dd>
              </div>
              <!-- 二手房 -->
              <div v-show="nows == 2">
                <dd>
                  <a href="href=//bj.lianjia.com/zufang/dongcheng/"
                    >东城租房</a
                  >
                  <a href="//news.lianjia.com/bj/">北京房产资讯</a>
                </dd>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="copy">
            贝壳找房（北京）科技有限公司 | 网络经营许可证
            <a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP备16057509号-2</a>
            | © Copyright©2010-2022 贝壳找房版权所有 |
            <a href="#">营业执照</a>
            <br />
            违法和不良信息举报电话: 010-86440676
            违法和不良信息举报邮箱:jubaoyouxiang@lianjia.com
            <br />
            涉未成年人举报电话: 010-86440676 涉未成年人举报邮箱:
            jubaoyouxiang@ke.com
          </div>
          <div class="jinghui">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802024019">
              <img src="../assets/img/lsm_index_13.png" alt="" />
              <p>京公网安备 11010802024019号</p>
            </a>
            <a href="https://www.12377.cn/">网上有害信息举报专区</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 固定内容 -->
    <detail-fixed />
  </div>
</template>

<script>
import DetailHeader from '@/components/DetailHeader.vue';
import DetailFixed from '@/components/DetailFixed.vue';
export default {
  components: { DetailHeader, DetailFixed, },
  mounted(){
    this.getData()
  },
  watch:{
    pages(){
      this.getData()
    },
  },
  methods: {
    listOperate(){
      this.listShow = !this.listShow
    },
    getData() {
      const url = `/list?page=${this.pages}`
      this.axios.get(url).then(res=>{
        console.log(res);
        this.data= res.data
      })
    },
  },
  data(){
      return{
        citys:['不限','新城区','碑林','莲湖','未央','雁塔','灞桥',
        '长安','西咸新区(西安)','高陵','临潼','阎良','蓝田','鄠邑区','周至'],
       now:0,
       nows:0,
       data:null,
       // 页脚导航条数据
       items: ["城市二手房", "房产咨询", "城区租房"],
       pages:'',
       listShow:false
      }
    },
};
</script>

<style lang="scss" scoped></style>
<style scoped src="../assets/css/list.css"></style>
